<template>
	<div class="zBox">
		<div class="topbox">
			<div class="t1" :class="{ isActive: active == 1 }" @click="active = 1">项目详情</div>
			<div class="t2" :class="{ isActive: active == 2 }" @click="active = 2">项目进度</div>
			<div class="t3" :class="{ isActive: active == 3 }" @click="active = 3">项目资料</div>
			<div class="t4" :class="{ isActive: active == 4 }" @click="active = 4">工时统计</div>
			<div class="t5" :class="{ isActive: active == 5 }" @click="active = 5">操作记录</div>
		</div>
		<div class="bottom">
			<Detail v-if="active == 1"></Detail>
			<Progress v-if="active == 2"></Progress>
			<DataProject v-if="active == 3"></DataProject>
			<Record v-if="active == 4"></Record>
			<OperateJl v-if="active == 5"></OperateJl>
		</div>
	</div>
</template>

<script lang="ts" setup>
import Detail from './detail.vue';
import Progress from './progress.vue';
import Record from './record.vue';
import DataProject from './dataProject.vue';
import OperateJl from './operateJl.vue';
import { getTjData } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
const userId = ref(useUserStore().userId);
const { proxy } = getCurrentInstance();
const { project_status, project_type, project_source } = proxy.useDict('project_status', 'project_type', 'project_source'); //项目状态
const data = reactive({
	addForm: {
		pageNum: 1,
		pageSize: 10
	}
});
const active = ref(1);

const { addForm } = toRefs(data);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.zBox {
	height: 100%;
	// background-color: #ffffff;
	border-radius: 10px;
}

.bottom {
	background: #fff;
	height: 94.5%;
	border-radius: 8px;
	border-top-left-radius: 0;
}
.topbox {
	display: flex;
	width: 61%;
	div {
		padding: 12px 55px;
		color: #fff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		cursor: pointer;
	}
	div:nth-child(1) {
		background-color: #ffc5c6ff;
	}
	div:nth-child(2) {
		background-color: #ffabb3ff;
	}
	div:nth-child(3) {
		background-color: #ff8994ff;
	}
	div:nth-child(4) {
		background-color: #ff6e7cff;
	}
	div:nth-child(5) {
		background-color: #fa5666;
	}
}

.isActive {
	color: #be1a21ff !important;
	background-color: #fff !important;
}
</style>
